<style type="text/css">

img.thumbnail {
	max-width: 40%;
}

img.thumbnail:hover {
	opacity:0.75;
}

/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 60%;
	height: 70%;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0,0,0,0.85);
	background-color: rgba(0,0,0,0.85);
	border:3px solid #c0c0c0;
	box-shadow: 0px 0px 9px #A0A0A0;
	max-width: 100%;
	max-height: 100%;
	
	-webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.5s;
    animation-name: slideIn;
    animation-duration: 0.5s
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 95%;
	max-height: 85%;
	margin-top: 2%;
}

.lightbox div {
	/** Pad the lightbox image */
	max-width: 95%;
	max-height: 85%;
	margin-top: 2%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}

.btn--left {
  top: 50%;
  left: 40px;
  &:after { content: '<'; }
}

.btn--right {
  top: 50%;
  right: 20px;
  &:after { content: '>'; }
}


/* Add Animation */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0} 
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

    BODY {scrollbar-3dlight-color:#A9A9A9;
           scrollbar-arrow-color:#D3D3D3;
           scrollbar-base-color:#A9A9A9;
           scrollbar-track-color:#F5F5F5;
           scrollbar-darkshadow-color:#A9A9A9;
           scrollbar-face-color:#F5F5F5;
           scrollbar-highlight-color:#FFEBCD;
           scrollbar-shadow-color:#7F7F7F}

    P.title {
	font-size:1.5em;
	font-weight:bold;
	font-family: 'Garamond', 'Palatino', serif;
	color:#2f5597;
	line-height:100%;
	margin-top:0.0em;
	margin-bottom:0.1em;
    }
	
	P.title-mobile {
	text-align:center;
	font-size:22px;
	font-weight:bold;
	font-family: 'Garamond', 'Palatino', serif;
	color:#2f5597;
	line-height:100%;
	margin-top:15px;
	margin-bottom:10px;
    }

    P.subtitle {
	font-size:1.3em;
	font-weight:bold;
	font-family: 'Garamond', serif;
	color:#2e75b6;
	margin-top:0.0em;
	margin-bottom:0.2em;
    }
	
	P.subtitle-mobile {
	text-align:center;
	line-height:22px;
	font-size:16px;
	font-weight:normal;
	font-family: 'Garamond', serif;
	color:#2e75b6;
	margin-top:0.0em;
	margin-bottom:0.2em;
    }

    P.tagline {
	font-size:22px;
	font-family: 'Garamond', serif;
	color:#2f5597;
	margin-top:0.0em;
	line-height:130%;
    }
	
	a.title {
	font-size:0.9em;
	font-weight:normal;
	font-family: 'Garamond', sans-serif;
	color:#6f4e94;
	margin-top:0.0em;	
	margin-bottom:0.0em;
	text-decoration:none;
	}
	
	a.title:hover {
	color:#9f7ec4;
    }

    a.nav {
	font-size:1.05em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#6f4e94;
	margin-top:0.0em;	
	margin-bottom:0.0em;
	text-decoration:none;
    }

    a.nav:hover {
	color:#9f7ec4;
    }

html {
	-webkit-text-size-adjust: none;
}

    body {
	line-height:0;
    }

    p {
	font-size:1.0em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#444444;
	line-height:160%;
	margin-top:0.0em;
	margin-bottom:0.0em;
    }
	
	p.intro-mobile {
		font-size:17px;
		font-weight:normal;
		font-family: 'Open Sans', sans-serif;
		text-align:left;
		color:#686868;
		line-height:160%;
		margin-top:5px;
		margin-bottom:15px;
	}
	
	
	p.intro {
		font-size:16px;
		font-weight:normal;
		font-family: 'Open Sans', sans-serif;
		text-align:justify;
		color:#686868;
		line-height:160%;
		margin-top:5px;
		margin-bottom:15px;
    }

    p.blue {
	font-size:1.0em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#2f5597;
	line-height:150%;
	margin-top:0.0em;
	margin-bottom:0.0em;
    }
	
	p.black {
	font-size:1.0em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#000000;
	line-height:150%;
	margin-top:0.0em;
	margin-bottom:0.0em;
    }
	
	p.offerings {
		margin-bottom:1.0em;
	}
	
	p.close-button {
		text-align:right; 
		color:#d0d0d0; 
		font-size:1.5em;
	}
	
	strong.blue {
		color: #2f5597;
		font-weight:normal;
	}
	
    b {
	color:#2f5597;
    }

    ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
    }

    ul > li {
	position: relative;
  	padding-left: 12px;
    }

    ul > li:before {
	content: "•";
  	position: absolute;
  	left: 0;
    }

    li {
	font-size:1.0em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#404040;
	line-height:150%;
	margin-top:0.0em;
	margin-bottom:1.0em;
    }

    p.impact-factor {
	font-size:1.0em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#808080;
	line-height:150%;
	margin-top:0.0em;
	margin-bottom:0.0em;
    }

    p.impact-number-2010 {
	font-size:1.1em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#cc6c2b;
	line-height:150%;
	margin-top:0.0em;
	margin-bottom:0.0em;
    }

    p.impact-year-2010 {
	font-size:1.0em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#ee843d;
	line-height:150%;
	margin-top:0.0em;
	margin-bottom:0.0em;
    }

    p.impact-number-2016 {
	font-size:1.1em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#5d8840;
	line-height:150%;
	margin-top:0.0em;
	margin-bottom:0.0em;
    }

    p.impact-year-2016 {
	font-size:1.0em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#7eb558;
	line-height:150%;
	margin-top:0.0em;
	margin-bottom:0.0em;
    }

    p.expertise-area {
	margin-bottom:0.7em;
    }
	
	p.img-caption {
		margin-top:0.3em;
		margin-bottom:0.4em;
	}

    a {
	font-size:1.0em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#6f4e94;
	margin-top:0.0em;	
	margin-bottom:0.0em;
	text-decoration:none;
    }

    a:hover {
	color:#9f7ec4;
    }

    h2 {
	font-size:1.35em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#2f5597;
	line-height:100%;
	margin-top:1.4em;
	margin-bottom:0.6em;
    }

    h3 {
	font-size:1.0em;
	font-weight:800;
	font-family: 'Open Sans', sans-serif;
	color:#2f5597;
	line-height:100%;
	margin-top:0.3em;
	margin-bottom:0.3em;
    }

    h3.impact {
	font-size:1.0em;
	font-weight:800;
	font-family: 'Open Sans', sans-serif;
	color:#2f5597;
	line-height:100%;
	margin-top:0.3em;
	margin-bottom:0.8em;
    }

    hr {
	margin-top:2.0em;
	margin-bottom:1.0em;
	border:1px solid #d0d0d0;
	border-top:0px;
	height:0px;
	width:100%;
    }

    div.next-button {
	margin-top:2.5em; 
	display:inline-block;
	padding-left:10px;
	padding-right:10px;
	padding-top:3px;
	padding-bottom:3px;
	margin-bottom:1.5em;
	height:2.0em; 
	background-color:#eCe7eC; 
	border:1px solid #c2c0c5; 
	line-height:2.0em; 
	vertical-align:middle;
	border-radius:7px; 
    }

    div.next-button:hover {
	background-color:#f9f4fB;
	box-shadow: 0px 0px 5px #e9e4eB;
    }
	
	img.intro-left {
		float:left;
		overflow:auto;
		height:125px;
		margin-top:8px;
		margin-bottom:0px;
		margin-right:12px;
	}
	
	img.intro-right {
		float:right;
		overflow:auto;
		height:125px;
		margin-top:8px;
		margin-bottom:0px;
		margin-left:12px;
	}
	
	img.intro-left-mobile {
		float:left;
		overflow:auto;
		height:135px;
		margin-top:8px;
		margin-bottom:0px;
		margin-right:15px;
	}
	
	img.intro-right-mobile {
		float:right;
		overflow:auto;
		height:135px;
		margin-top:8px;
		margin-bottom:0px;
		margin-left:15px;
	}
	
	img.quote {
		height:5.0em; 
		vertical-align:top; 
		margin-top:5px;
		border:1px solid #d0d0d0; 
		box-shadow: 0px 0px 5px #E0E0E0;
		border-radius:12px; 
	}
	
	img.portfolio {
		border:1px solid #d0d0d0; 
		box-shadow: 0px 0px 4px #D0D0D0;
		vertical-align: middle;
	}
	
	img.portfolio:hover {
		opacity:0.5;
	}
	
	img.portfolio-large {
		border:2px solid #A0A0A0; 
		box-shadow: 0px 0px 5px #B0B0B0;
		vertical-align: middle;
	}
	
	img.icon {
		width:2.0em; 
		margin-top:5px;
		margin-right:1.0em;
		-webkit-filter: drop-shadow(1px 1px 1px #AAA);
		filter: drop-shadow(1px 1px 1px #AAA);
	}

</style>